{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <title>{% block title %}Cabot{% endblock title %}</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  {% load compress %}
  {% compress css %}
  <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet">
  <link id="chosen-css" href="{% static 'theme/css/chosen.css' %}" rel="stylesheet">
  <link id="chosen-css" href="{% static 'theme/css/bootstrap-chosen.css' %}" rel="stylesheet">
  <link id="datatables-css" href="{% static 'theme/css/bootstrap-datatables.min.css' %}" rel="stylesheet">
  <link href="{% static 'bootstrap/css/dashboard.css' %}" rel="stylesheet">
  <link href="{% static 'theme/css/jquery-ui-1.8.21.custom.css' %}" type="text/css" rel="stylesheet">
  <link href="{% static 'arachnys/css/base.less' %}" type="text/less" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'arachnys/css/morris.css' %}" type="text/css">
  <link rel="stylesheet" href="{% static 'arachnys/css/graph.css' %}" type="text/css">
  <link rel="stylesheet" href="{% static 'autocomplete_light/vendor/select2/dist/css/select2.css' %}" type="text/css">
  <link rel="stylesheet" href="{% static 'autocomplete_light/select2.css' %}" type="text/css">
  {% endcompress %}
  <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.css" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  <link rel="icon" href="{% static 'arachnys/img/icon_48x48.png'%}" type="image/png">
  {% compress js %}
  <script type="text/coffeescript">
  if window.location.host.indexOf('localhost') != -1
    window.ENVIRONMENT = 'DEVELOPMENT'
  else
    window.ENVIRONMENT = 'PRODUCTION'
  </script>
  {% endcompress %}
</head>

<body>
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a href="{% url 'dashboard' %}" class="navbar-brand"><img src="{% static 'arachnys/img/icon_48x48.png' %}" width='20' height='20' /> Cabot</a>
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
        <div class="navbar-collapse collapse" id="navbar-main">
          {% block header_navbar_menu %}
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="{% url 'login' %}"><i class="glyphicon glyphicon-log-in"></i> Log In</a>
            </li>
          </ul>
          {% endblock header_navbar_menu %}
        </div>
    </div>
  </div>
  <!-- start: Header -->
  <div class="container">
    <noscript>
      <div class="alert alert-block span10">
        <h4 class="alert-heading">Warning!</h4>
        <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
      </div>
    </noscript>
    {% if messages %}
    <div class="messages">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissable">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
          {{ message }}
        </div>
        {% endfor %}
    </div>
    {% endif %}
    <div class="row">
    {% block content %}
    {% endblock content %}
    </div>
    <div class="clearfix"></div>

  </div>

  {% load compress %}
  {% block js %}

  {% compress js %}
    <script src="{% static 'bootstrap/js/jquery-1.10.2.js' %}"></script>
    <script src="{% static 'theme/js/jquery-ui.js' %}"></script>
    <script src="{% static 'theme/js/jquery.ui.core.js' %}"></script>
    <script src="{% static 'theme/js/jquery.ui.position.js' %}"></script>
    <script src="{% static 'theme/js/jquery.ui.autocomplete.js' %}"></script>

    <script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>

    <script src="{% static 'theme/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'theme/js/jquery.dataTables.bootstrap.min.js' %}"></script>

    <script src="{% static 'theme/js/chosen.jquery.js' %}"></script>

    <script src="{% static 'theme/js/jquery.sparkline.min.js' %}"></script>

    <script src="{% static 'theme/js/custom.js' %}"></script>
    <script src="{% static 'arachnys/js/raphael.js' %}"></script>
    <script src="{% static 'arachnys/js/morris.js' %}"></script>
    <!-- end: JavaScript-->
    <script type="text/coffeescript">
    $ () ->
      $('.sparktristate').sparkline('html', {type: 'tristate'})

      $('ul.nav li a').each () ->
        if $($(this))[0].href == String(window.location)
          $(this).parent().addClass('active')

      $('[data-rel="chosen"],[rel="chosen"]').chosen({ width: '100%' })

      #$('.datatable').dataTable
      #  sDom: "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>",
      #  sPaginationType: "bootstrap",
      #  iDisplayLength: 100,
      #  oLanguage:
      #    sLengthMenu: "_MENU_ records per page"
    </script>
  {% endcompress %}
  {% endblock js %}
</body>
</html>
